<template>
	<router-view v-slot="{ Component, route }" class="container">
		<transition :name="route.meta.transitionName" mode="out-in">
			<keep-alive v-if="$route.meta.keepAlive">
				<component :is="Component" />
			</keep-alive>
			<keep-alive v-else>
				<component :is="Component" />
			</keep-alive>
		</transition>
	</router-view>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
	watch: {
		$route(to, from) {
			if (to.meta.level > from.meta.level) {
				to.meta.transitionName = "slide-left";
			} else {
				to.meta.transitionName = "slide-right";
			}
		},
	},
});
</script>

<style lang="less">
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
	will-change: transform;
	transition: all 0.2s;
	width: 100%;
	position: absolute;
	z-index: 99;
}
.slide-right-enter {
	opacity: 0;
	transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
	opacity: 0;
	transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
	opacity: 0;
	transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
	opacity: 0;
	transform: translate3d(-100%, 0, 0);
}
</style>